<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta name="author" content="order by dede58.com"/>
		<title>用户注册</title>
		<link rel="stylesheet" type="text/css" href="./css/login.css">
		<script type="text/javascript" src="./js/register.js"></script>
	</head>
	<body>
		
		<div class="regist">
			<div class="regist_center">
				<div class="regist_top">
					<div class="left fl">会员注册</div>
					<div class="right fr"><a href="index.jsp" target="_self">小米商城</a></div>
					<div class="clear"></div>
					<div class="xian center"></div>
				</div>
				<div class="regist_main center">
					<div class="username" >用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;
					<input id="uname" class="shurukuang" type="text" name="username" placeholder="请输入你的用户名"/>
					<span style="color:red"></span>
					</div>
					
					<div class="username" >密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;
					<input id="pwd" class="shurukuang" type="password" name="password" placeholder="请输入你的密码"/>
					<span style="color:red"></span>
					</div>
					
					<div class="username" >确认密码:&nbsp;&nbsp;
					<input id="newpwd" class="shurukuang" type="password" name="password" placeholder="请再次输入您的密码"/>
					<span style="color:red"></span>
					</div>
					
					<div class="username" >手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;
					<input id="tel" class="shurukuang" type="text" name="password" placeholder="请输入你的手机号码"/>
					<span style="color:red"></span>
					</div>
					
					<div class="username" style="margin:0px 0px;">
						<input type="checkbox" name="allow" id="allow" checked="checked">
						<label>同意”小米商城使用协议“</label>
						<span style="color:red"></span>
					</div>
					
					<div class="username" style="margin:0px 0px; text-align:center; color:red;" id="errorinfo">
						<div class="clear"></div>
					</div>
				</div>
				<div class="regist_submit">
					<input class="submit" type="button" name="button" id="reg" value="立即注册" >
				</div>
				
			</div>
		</div>
		<script src="js/jquery-1.12.4.min.js"></script>
	<script>
	var error_name = false;
	var error_password = false;
	var error_check_password = false;
	var error_tel = false;
	
	//失焦事件  进行检查
	$('#uname').blur(function() {
		check_user_name();
	});

	$('#pwd').blur(function() {
		check_pwd();
	});

	$('#newpwd').blur(function() {
		check_cpwd();
	});

	$('#tel').blur(function() {
		check_tel();
	});

	$('#allow').click(function() {
		if($(this).is(':checked'))
		{
			error_check = false;
			$(this).siblings('span').hide();
		}
		else
		{
			error_check = true;
			$(this).siblings('span').html('请勾选同意');
			$(this).siblings('span').show();
		}
	});	

	function check_user_name(){
		var len = $('#uname').val().length;
		if(len<5||len>20)
		{
			$('#uname').next().html('请输入5-20个字符的用户名')
			$('#uname').next().show();
			error_name = true;
		}
		else
		{
			$('#uname').next().hide();
			error_name = false;
		}
	}

	function check_pwd(){
		var len = $('#pwd').val().length;
		if(len<8||len>20)
		{
			$('#pwd').next().html('密码最少8位，最长20位')
			$('#pwd').next().show();
			error_password = true;
		}
		else
		{
			$('#pwd').next().hide();
			error_password = false;
		}		
	}


	function check_cpwd(){
		var pass = $('#pwd').val();
		var cpass = $('#newpwd').val();

		if(pass!=cpass)
		{
			$('#newpwd').next().html('两次输入的密码不一致')
			$('#newpwd').next().show();
			error_check_password = true;
		}
		else
		{
			$('#newpwd').next().hide();
			error_check_password = false;
		}		
		
	}

	
	function check_tel(){
		var re = /^1[3456789]\d{9}$/;

		if(re.test($('#tel').val()))
		{
			$('#tel').next().hide();
			error_tel = false;
		}
		else
		{
			$('#tel').next().html('你输入的手机号码格式不正确')
			$('#tel').next().show();
			error_check_password = true;
		}
	}


	$('#reg').on("click",function() {
		check_user_name();
		check_pwd();
		check_cpwd();
		check_tel();

		if(error_name == false && error_password == false && error_check_password == false && error_tel == false)
		{
			var uname=$('#uname').val();
			var pwd=$('#pwd').val();
			var tel=$("#tel").val();
			//信息填写正确，发送ajax请求
			$.post("userServlet",{
	        	op:'reg',
	        	uname:uname,
	        	pwd:pwd,
	        	tel:tel
	          },function(data){
	        	  if(data>0 ){
	        		  $("#errorinfo").html("注册成功，即将跳转主界面....."); 
	        		  //延时器
	        		  setTimeout(function(){
	        			  location.href="login.jsp?uname="+uname;
	        		  },1500);
	        	  }else{
	        		$("#errorinfo").html("注册失败，网络异常....."); 
	        	  }
	          },"text");
		}
		else
		{
			return false;
		}

	});
	</script>
		
	</body>
</html>